<template>
  <div class="butt-list-sty">
    <div
      v-for="(item,index) in buttonselectlist "
      :key="index"
      :class="index === selectedindex ? 'basebut1':'basebut2'"
      @click="selbut(item, index)"
    >{{ item[buttonselectName] }}</div>
  </div>
</template>
<script>
export default {
  props: {
    buttonselectlist: {
      type: Array,
      default: () => []
    },
    buttonselectName: {
      type: String,
      default: () => "name"
    }
  },
  data() {
    return {
      selectedindex: 0
    };
  },
  watch: {
    buttonselectlist: {
      deep: true,
      handler(val) {
        this.selbut(this.buttonselectlist[0], 0);
      }
    }
  },
  mounted() {
    if (this.buttonselectlist.length > 0) {
      this.selbut(this.buttonselectlist[0], 0);
    }
  },
  methods: {
    selbut(item, i) {
      this.selectedindex = i;
      this.$emit("nowselectbuttonindex", item, i);
    }
  }
};
</script>
<style lang="scss" scoped>
.butt-list-sty {
  // width: 100%;
  height: 44px;
  display: flex;
  flex-direction: row;
  margin-bottom: 2px;
  font-size: 18px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
.basebut1 {
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  // background-image: linear-gradient(#1f74c7, #1f74c7, #1f74c7);
  border-radius: 15px;
  color: #ffffff;
  background: #3591eb;
  border-radius: 5px 5px 5px 5px;
  cursor: pointer;
  margin: 3px 5px;
}
.basebut2 {
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0px 0px 3px 1px #7bbefd;
  border-radius: 5px 5px 5px 5px;
  // background-color: #134d86;
  // border: #f6f9f9 1px solid;
  // color: #ffffff;
  color: #3591eb;
  cursor: pointer;
  margin: 3px 5px;
}
</style>
